<template>
  <!-- 顶部 -->
  <div class="newsList">
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="图文资讯"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>

    <!-- 商品列表 -->
    <van-card
      v-for="item in newsList"
      :key="item.id"
      :title="item.title"
      :thumb="item.img_url"
      @click="jumbDetail(item)"
    >
      <template #bottom>
        <span>发表时间：{{ item.add_time | dateformat }}</span>
      </template>
      <template #num>
        <span>点击：{{ item.click }}</span></template
      >
    </van-card>
  </div>
</template>

<script>
import { getnewslist } from "@/apis/newsInformation";
import { dateformat } from "@/utils/filteror";
export default {
  data() {
    return {
      newsList: [],
    };
  },
  async mounted() {
    let res = await getnewslist();
    console.log(res);
    this.newsList = res.data.message;
  },
  methods: {
    jumbDetail(item) {
      this.$router.push({ path: `/NewsDetial/${item.id}` });
    },
  },
  filters: {
    dateformat,
  },
};
</script>

<style lang="less" scoped>
// .newsList {
//   padding-bottom: 50px;
// }

/deep/ .van-nav-bar__title {
  color: #fff;
}
.header {
  /deep/ .van-nav-bar__title {
    color: #1989fa;
  }
}

/deep/ .van-nav-bar {
  background-color: #f7f7f7;
}

/deep/ .van-card {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  .van-card__title {
    margin-top: 5px;
    font-size: 16px;
    line-height: 20px;
    max-height: 40px;
  }
  span {
    color: #7ac7ff;
    font-size: 16px;
  }
}
</style>